<template>
    <div class="main_box" style="padding:10px">
        <div class="add_wrap">
            <el-form label-width="200px">
                <div class="tit">
                    <h2>基础信息</h2>
                    <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回
                    </el-button>
                </div>
                <el-row>
                    <el-form-item label="活动编号:">
                        <span>{{ dataInfo.activeNo }}</span>
                    </el-form-item>
                    <el-form-item label="活动名称:">
                        <span>{{ dataInfo.activeName }}</span>
                    </el-form-item>
                    <el-form-item label="活动类型:">
                        <span>{{ dataInfo.activeType == 1 ? '店铺活动' : '缴费活动' }}</span>
                    </el-form-item>
                    <el-form-item label="活动时间:">
                        <span>{{ dataInfo.beginDate + "-" + dataInfo.endDate }}</span>
                    </el-form-item>
                    <el-form-item label="单次购买可享活动价的产品总数:">
                        <span>{{ dataInfo.maxCount }}</span>
                    </el-form-item>
                    <el-form-item label="活动限制:">
                        <span>{{ formatLimitType(dataInfo.limitType) }}</span>
                    </el-form-item>
                    <el-form-item label="活动展示名称:">
                        <span>{{ dataInfo.activeShowName }}</span>
                    </el-form-item>
                    <el-form-item label="活动展示单位(折扣):">
                        <span>{{ dataInfo.activeShowUnit }}</span>
                    </el-form-item>
                    <el-form-item label="活动描述:">
                        <span>{{ dataInfo.describes }}</span>
                    </el-form-item>
                    <el-form-item label="创建人:">
                        <span>{{ dataInfo.createUserName }}</span>
                    </el-form-item>
                    <el-form-item label="创建时间:">
                        <span>{{ dataInfo.createDate }}</span>
                    </el-form-item>
                    <el-form-item label="修改人:">
                        <span>{{ dataInfo.modifyUserName }}</span>
                    </el-form-item>
                    <el-form-item label="修改时间:">
                        <span>{{ dataInfo.modifyDate }}</span>
                    </el-form-item>
                    <el-form-item label="备注:">
                        <span>{{ dataInfo.remark }}</span>
                    </el-form-item>
                </el-row>
                <div class="tit" v-if="dataInfo.activeType == 1">
                    <h2>活动货品列表</h2>
                </div>
                <el-row  v-if="dataInfo.activeType == 1">
                    <el-table ref="tableList" :data="activeServers" style="max-width: fit-content;width:fit-content">
                        <el-table-column type="index" align="center" width="50" label="序号">

                        </el-table-column>
                        <el-table-column align="center" label="货品编号" prop="serverCode" width="150"></el-table-column>
                        <el-table-column align="center" label="货品图片" width="160">
                            <template slot-scope="scope">
                                <div class="img-wrapper">
                                    <el-image style="width: 100px;height:100px" title="点击可预览" :src="scope.row.mainImage"
                                        fit="cover" :preview-src-list="[scope.row.mainImage]" :z-index="scope.$index">
                                    </el-image>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="货品名称" prop="name" width="150">
                        </el-table-column>
                        <!-- <el-table-column align="center" label="货品分类" width="200">
                                <template slot-scope="scope">
                                    {{ scope.row.serverClassifyName }}-{{ scope.row.thirdClassifyName }}
                                </template>
                            </el-table-column> -->
                        <el-table-column align="center" label="规格">
                            <template slot-scope="scope" width="120">
                                <el-tag type="danger" size="mini" effect="dark" v-if="scope.row.serverType == 2">
                                    套餐
                                </el-tag>
                                <el-tag effect="dark" size="mini" v-else-if="scope.row.variantState == 1">
                                    单品
                                </el-tag>
                                <el-tag type="success" size="mini" effect="dark" v-else-if="scope.row.variantState == 2">
                                    多规格
                                </el-tag>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column align="center" label="平台原价" prop="price"></el-table-column> -->
                        <el-table-column align="center" label="平台售价(元)" prop="salePrice" width="130"></el-table-column>
                        <el-table-column align="center" label="活动价(元)" width="130">
                            <template slot-scope="scope">
                                <span v-if="scope.row.variantState != 2">{{ scope.row.activePrice }}</span>
                                <span v-else>#</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="折扣" width="100">
                            <template slot-scope="scope">
                                <div v-if="scope.row.variantState != 2">
                                    {{ getDiscount(scope.row) }}
                                </div>
                                <span v-else>#</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="可享活动价的个数" width="100">
                            <template slot-scope="scope">
                                <span v-if="scope.row.variantState != 2">{{ scope.row.maxNum }}</span>
                                <span v-else>#</span>
                            </template>
                        </el-table-column>

                        <el-table-column align="center" label="操作" width="150">
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.variantState == 2" type="success" plain size="mini"
                                    @click="handleVariant(scope.row)">
                                    查看规格
                                </el-button>
                                <span v-else>#</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>

                <div class="tit" v-if="dataInfo.activeType == 2">
                    <h2>缴费活动列表</h2>
                </div>
                <el-row  v-if="dataInfo.activeType == 2">
                    <el-table ref="tableList" :data="dataInfo.activeRules" style="max-width: fit-content;width:fit-content">
                        <el-table-column align="center" width="300" label="缴费区间（月数）">
                            <template slot-scope="scope">
                                {{ scope.row.minRange }}月 - {{ scope.row.maxRange }}月
</template>
                        </el-table-column>
                        <el-table-column  align="center" width="400" prop="content"  label="优惠内容"></el-table-column>
                    </el-table>
                </el-row>

                <el-dialog :visible.sync="show" title="规 格" center>
                    <el-table :data="list" max-height="600px">
                        <el-table-column align="center" width="140" label="变体">
                            <template slot-scope="scope">
                                <div>
                                    {{ scope.row.sku }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="图片" width="160">
                            <template slot-scope="scope">
                                <div class="img-wrapper">
                                    <el-image style="width: 100px;height:100px" title="点击可预览" :src="scope.row.mainImg"
                                        fit="cover" :preview-src-list="[scope.row.mainImg]" :z-index="scope.$index">
                                    </el-image>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column align="center" label="平台售价(元)" prop="salePrice" width="150"></el-table-column>
                        <el-table-column align="center" label="活动价(元)" width="150">
                            <template slot-scope="scope">
                                <span>{{ scope.row.activePrice }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="折扣" width="150">
                            <template slot-scope="scope">
                                <div>
                                    {{ getDiscount(scope.row) }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="可享活动价的个数">
                            <template slot-scope="scope">
                                <span>{{ scope.row.maxNum }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- <div slot="footer">
                    <el-button type="primary">
                        确定
                    </el-button>
                    <el-button>
                        取消
                    </el-button>
                </div> -->

                </el-dialog>
            </el-form>
        </div>
    </div>
</template>

<script>
import ActiveApi from '@/api/operation/active';
export default {
    data() {
        return {
            dataInfo: {},
            list: [],
            activeServers: [],
            show: false
        };
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {

            ActiveApi.getActive({ id: this.$route.query.id }).then(res => {
                this.dataInfo = res.data
                this.activeServers = res.data.activeServers
                this.formatData()
            })
        },
        formatLimitType(type) {
            switch (type) {
                case 1:
                    return '24小时内只能一次'
                case 2:
                    return '只能一次'
                default:
                    return "无"

            }
        },
        formatData() {
            const list = []
            const activeServers = []
            this.activeServers.forEach(item => {
                const index = list.findIndex(item2 => item2.some(item3 => item3.serverId == item.serverId))
                if (index != -1) {
                    list[index].push(item)
                } else {
                    list[list.length] = [item]
                }
            })

            list.forEach(item => {
                activeServers.push(item[0])
                if (item[0].sku && item[0].sku != '无') {
                    this.$set(item[0], "list", item)
                }
            })
            this.activeServers = activeServers

        },
        handleVariant(row) {
            this.show = true
            this.list = row.list
            // variant.specNames = row.activeServers[0].variantSpecs.map(item=>item.specName)
        },
        getDiscount(row) {
            const { salePrice, activePrice } = row
            if (activePrice && activePrice !== 0) {
                if (activePrice == 0) {
                    row.activeDiscount = 10

                } else {
                    row.activeDiscount = parseFloat(((activePrice / salePrice) * 10).toFixed(2))
                }
                return row.activeDiscount

            }
        },
        returnList() {
            this.$store.dispatch('delView', this.$route);
            this.$router.push({ path: '/operation/activeManagement' })
        }
    },

}

</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
